<template>
	<view class="content">
		<view class="hearder">
			<view class="top_message">
				{{info.header_tips}}
			</view>
			<view class="header_wrapper">
				<view class="hearder_wrapper_body">
					<view class="mid_left">
						<view class="mid-nav">
							<uni-icons type="bars" :size="25" @click="showDrawer"></uni-icons>
						</view>
						<navigator class="logo" url="/pages/index/index">
							<!-- <image src="/static/img/logo.png" mode=""></image> -->
							<image :src="info.logo && info.logo.path" mode=""></image>
						</navigator>
					</view>
					<view class="nav_menu">
						<view>
							<ul class="nav-menu-ul">
								<li class="sub-nav-li">
									<view class="nav-submenu-link">
										<uni-icons class="icon-text" :size="15" type="bottom"
											color="#0a0000"></uni-icons>
										<uni-icons class="icon-blod icon-text" type="person" :size="20"
											@click="showAccount"></uni-icons>
										<text>{{name}}</text>
									</view>
									<view :class="isshow_account?'nav-my-account active':'nav-my-account'">
										<ul class="nav-my-account-ul">
											<li class="nav-my-account-li" @click="toPage('/pages/user/orderlist')">
												<text>{{$t('index.ddcx')}}</text>
											</li>
											<li class="nav-my-account-li" @click="toPage('/pages/user/index')">
												<text>{{$t('index.hyzq')}}</text>
											</li>
											<li class="nav-my-account-li" @click="toPage('/pages/user/salelist')">
												<text>{{$t('index.wdsc')}}</text>
											</li>
											<li class="nav-my-account-li" v-if="is_login" @click="loginOut">
												<text>{{$t('index.dc')}}</text>
											</li>
											<li class="nav-my-account-li" v-else @click="toPage('/pages/login/index')">
												<text>{{$t('index.hydrzc')}}</text>
											</li>
										</ul>
									</view>
								</li>

								<li class="sub-nav-li">
									<view class="nav-submenu-link">
										<image src="/static/icon/i18.svg" mode="" @click="showLang"></image>
									</view>
									<view :class="isshow_lang?'nav-my-account active':'nav-my-account'">
										<ul class="nav-my-account-ul">
											<li class="nav-my-account-li" @click="changeLocale('zh-Hans')">
												<text>中文</text>
											</li>
											<li class="nav-my-account-li" @click="changeLocale('zh-Hant')">
												<text>繁體</text>
											</li>
											<li class="nav-my-account-li" @click="changeLocale('en-us')">
												<text>English</text>
											</li>
										</ul>
									</view>
								</li>
								<!-- <li class="sub-nav-li">
									<view class="nav-submenu-link" @click="toPage('/pages/shop/cart')">
										<uni-icons class="icon-blod icon-text" type="cart" :size="20"></uni-icons>
										<text class="shopping-cart-badge">4</text>
									</view>
									<view class="nav-shopping-cart-menu">
										<view class="has-shopping-cart-item">
											<view class="has-shopping-title">
												最新加入項目
											</view>
											<view class="nav-shopping-cart-ul" v-for="(item,index) in cartlist"
												:key="index">
												<view class="nav-shopping-cart-li">
													<navigator url="">
														<view class="cart-img">
															<image src="/static/img/goods.jpg" mode=""></image>
														</view>
														<view class="cart-goodsinfo">
															<view class="nav-shopping-cart-title">
																DigiMax★DP-3X6 侍衛級超淨化UV紫外線光殺菌除螨空氣清淨機(紫外線殺菌/抗菌/防疫必備)
															</view>
															<view class="nav-shopping-cart-price">
																NT$980
															</view>

														</view>
														<view class="nav-del">
															<uni-icons type="trash-filled" :size="25"></uni-icons>
														</view>
													</navigator>
												</view>
											</view>
											<view class="nav-shopping-cart-summary">
												<button>结账</button>
											</view>
										</view>
									</view>
								</li>
								 -->
								<!-- <li class="sub-nav-li mid-search">
									<navigator class="nav-submenu-link" url="/pages/index/search">
										<uni-icons class="icon-blod icon-text" type="search" :size="20"></uni-icons>
									</navigator>
								</li> -->
								<!-- <li class="sub-nav-li pc-bz" v-if="name != ''">
									<view class="nav-submenu-link flex-gap">
										<uni-icons class="icon-text" :size="15" type="bottom"
											color="#0a0000"></uni-icons>
										<text>{{name}}</text>

									</view>
								</li> -->
							</ul>
						</view>
						<view class="nav-menu-main">
							<ul class="nav-main-ul">
								<li>
									<view class="nav_menu_a" @mousemove="closeThird">
										{{$t('index.spfl')}}
										<uni-icons class="xjt" v-show="firstList.length > 0" type="down"></uni-icons>
									</view>
									<view class="second-menu" v-show="firstList.length > 0">
										<view class="second-menu-ul">
											<view class="second-menu-li" v-for="(sitem,sindex) in firstList"
												:key="sindex" @click="getSecond(sitem)">
												<text class="second-menu-text">{{sitem.name}}</text>
												<uni-icons type="right" v-show="sitem.children" :size="15"
													color="#333"></uni-icons>
											</view>
										</view>
										<view class="third-menu" :style="thirdStyle">
											<view class="third-menu-ul">
												<view class="third-menu-title">
													{{currentItem.name}}
													<uni-icons type="closeempty" @click="closeThird"></uni-icons>
												</view>
												<view class="third-menu-li"
													v-for="(titem,tindex) in currentItem.children" :key="tindex">
													<navigator :url="'/pages/shop/index?cid='+titem.id">
														<text>{{titem.name}}</text>
													</navigator>
												</view>
											</view>
										</view>
									</view>
								</li>
								<li v-for="(fitem,findex) in firstList" :key="findex" v-if="fitem.is_recommend == 1">
									<navigator class="nav_menu_a" @mousemove="closeThird">
										{{fitem.name}}
										<uni-icons class="xjt" v-show="fitem.secondList" type="down"></uni-icons>
									</navigator>
									<view class="second-menu" v-show="fitem.children">
										<view class="second-menu-ul">
											<view class="second-menu-li" v-for="(sitem,sindex) in fitem.children"
												:key="sindex" @click="toPage('/pages/shop/index?cid='+sitem.id)">
												<text class="second-menu-text">{{sitem.name}}</text>
											</view>
										</view>
									</view>
								</li>
							</ul>
							<!-- <view class="searchbox">
								<view class="searchinput">
									<input :placeholder="$t('index.sssp')" type="text" v-model="search">
									<uni-icons type="search" ::size="18" color="#666"></uni-icons>
								</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-drawer ref="showRight" mode="left" :mask-click="true" :width="menuWidth">
			<scroll-view scroll-y="true">
				<view class="mid-menu">
					<view class="mid-top">
						<image src="/static/img/logo.png" mode=""></image>
						<uni-icons type="closeempty" :size="15" @click="closeDrawer"></uni-icons>
					</view>
					<view class="mid-menu-list">
						<view :class="midMenuId == item.id ?'mid-menu-li active':'mid-menu-li'" @click="changeMid(item)"
							v-for="(item,index) in firstList" :key="index">
							<view class="mid-menu-fname">
								<view class="mid-menu-text">
									{{item.name}}
								</view>
								<uni-icons class="icon-down" :size="15" type="down"
									v-if="item.children && item.children.length>0"></uni-icons>
							</view>
							<view class="mid-second">
								<view class="mid-second-li" v-for="(sitem,sindex) in item.children" :key="sindex"
									@click="toPage('/pages/shop/index?cid='+sitem.id)">
									{{sitem.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	import {
		category
	} from "@/api/goods.js"
	import {
		checkUser
	} from "@/api/user.js"
	import {
		getBasicConf
	} from "@/api/api.js"
	export default {
		data() {
			return {
				menuWidth: 0,
				search: '', //导航栏搜索
				cartlist: [1, 2, 3], //购物车列表
				firstList: [],
				thirdList: [], //三级分类
				thirdStyle: '', //三级分类样式
				thirdTitle: '', //三级分类标题
				midMenuId: '',
				currentItem: '',
				isshow_account: false,
				is_login: false,
				isshow_lang: '',
				info: [],
				name: ''
			}
		},
		props: {
			username: {
				typeof: String,
				default: ''
			}
		},
		created() {
			let win = uni.getWindowInfo()
			this.menuWidth = win.windowWidth * 0.8
			this.category()
			this.checkUser()
			this.getBasicConf()
		},
		methods: {
			changeLocale(locale) {
				let pages = getCurrentPages();
				let currentPage = pages[pages.length - 1];
				let url = currentPage.__page__.fullPath
				console.log(url);
				uni.setLocale(locale)
				this.$i18n.locale = locale
				uni.reLaunch({
					url
				})
			},
			async getBasicConf() {
				let res = await getBasicConf()
				this.info = res.data
				this.$siteConfig = this.info
			},
			showLang() {
				this.isshow_lang = true
			},
			checkUser() {
				checkUser().then(res => {
					if (res.data.user) {
						this.name = res.data.user.username
						this.is_login = true
					} else {
						this.is_login = false
					}
				})
			},
			loginOut() {
				uni.removeStorageSync('jun-token')
				this.is_login = false
			},
			//获取分类
			category() {
				category().then(res => {
					this.firstList = res.data
				})
			},
			getfirstList() {
				if (this.firstList == '') {
					this.firstList = []
				}
			},
			// 手机端显示个人中心
			showAccount() {
				this.isshow_account = !this.isshow_account

			},
			// 手机端选择分类下拉
			changeMid(item) {
				if (this.midMenuId == item.id) {
					this.midMenuId = ''
				} else if (this.menuWidth) {
					this.midMenuId = item.id
				}
			},
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
			closeThird() {
				this.thirdStyle = ''
			},
			getSecond(item) {
				// 点击二级分类
				this.currentItem = item
				this.thirdTitle = item.sname
				if (item.children && item.children != '') {
					this.thirdList = item.children
					this.thirdStyle = 'display:block'
				} else {
					// uni.navigateTo({
					// 	url: '/pages/shop/index?id=' + item.sid
					// })
				}
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.top_message {
		font-size: 13px;
		line-height: 20px;
		justify-content: center;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		transform: translateZ(0px);
		background-color: rgb(255, 83, 83);
		color: rgb(255, 255, 255);
		padding: 7px 16px;
	}

	.mid-menu {
		.mid-top {
			display: flex;
			align-items: center;
			gap: 5px;
			height: 56px;
			padding: 0 12px;
			justify-content: space-between;
			background: #fffbfb;
			border-bottom: 1px solid #d4d9de;

			image {
				width: 40px;
				height: 40px;
			}
		}

		.mid-menu-list {
			padding: 8px 0;

			.mid-menu-li {

				.mid-second {
					height: 0;
					opacity: 0;
					overflow: hidden;

					.mid-second-li {
						background: #f0f0f0;
						padding-left: 12px;
						height: 20px;
						font-size: 14px;
						line-height: 20px;
						font-weight: normal;
						padding: 12px;
						color: rgb(51, 51, 51);
						overflow: hidden;
						word-break: break-all;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				&.active {
					.mid-second {
						height: 100%;
						opacity: 1;
					}

					.icon-down {
						transform: rotate(-180deg);
					}
				}

				.mid-menu-fname {
					display: flex;
					justify-content: space-between;
					height: 20px;
					font-size: 14px;
					line-height: 20px;
					font-weight: normal;
					padding: 12px;
					color: rgb(51, 51, 51);
					overflow: hidden;
					word-break: break-all;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.icon-down {
					transition: .3s;
				}
			}
		}

	}

	.place {
		height: 134px;
	}

	.content {
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.hearder {
		width: 100%;
		box-shadow: 0 0 10px #ccc;

		.header_wrapper {
			height: 100px;
			background: #fff;
		}

		.hearder_wrapper_body {
			display: flex;
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 10px;
			box-sizing: border-box;

			.mid-nav {
				display: none;
				cursor: pointer;
			}

			.logo {
				box-sizing: border-box;
				height: 100px;
				padding: 20px 0 15px 0;
				display: flex;
				text-align: center;
				align-items: center;
				width: 65px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.nav_menu {
				width: calc(100% - 65px);
				box-sizing: border-box;
				height: 100px;
				padding-left: 2%;
				flex-flow: column;

				.mid-search {
					display: none;
				}

				.flex-gap {
					gap: 5px;
					height: 50px;
					display: flex;
					align-items: center;

					text {
						font-size: 14px;
					}
				}

				.nav-menu-ul {
					display: flex;
					align-items: center;
					height: 50px;
					justify-content: flex-end;
					font-size: 12px;

					image {
						width: 19px;
						height: 19px;
					}

					.sub-nav-li:hover {

						.nav-my-account,
						.nav-shopping-cart-menu {
							display: block;
							opacity: 1;
						}

					}

					.sub-nav-li {
						padding: 0 8px;
						z-index: 2;
						position: relative;
						height: 100%;
						line-height: 50px;
						display: flex;
						align-items: center;

						&.mid-search {
							display: none;
						}

						.nav-shopping-cart-menu {
							position: absolute;
							z-index: 650;
							top: 100%;
							right: 0;
							display: none;
							opacity: 0;
							overflow-x: hidden;
							overflow-y: auto;
							box-sizing: border-box;
							width: 340px;
							max-height: 80vh;
							padding: 12px;
							background: #fff;
							border: 1px solid #d8d8d8;

							.has-shopping-title {
								font-size: 18rpx;
								line-height: 1.5;
								color: #4a4e5c;
							}

							.nav-shopping-cart-ul {
								.nav-shopping-cart-li {
									display: flex;
									align-items: center;
									padding: 12px 0;
									border-bottom: 1px solid #d8d8d8;

									navigator {
										display: flex;
									}

									image {
										width: 80px;
										height: 80px;
										margin-right: 8px;
									}

									.cart-goodsinfo {
										.nav-shopping-cart-title {
											font-weight: normal;
											color: #4a4e5c;
											font-size: 13px;
											line-height: 18px;
											display: -webkit-box;
											overflow: hidden;
											height: 54px;
											white-space: normal;
											text-overflow: ellipsis;
											word-break: break-all;
											-webkit-box-orient: vertical;
											-webkit-line-clamp: 3;
										}

										.nav-shopping-cart-price {
											color: rgb(255, 83, 83);
											font-size: 18 rpx;
											line-height: 1.5;
										}
									}
								}
							}

							.nav-shopping-cart-summary {
								margin-top: 10px;

								button {
									border-radius: 4px;
									font-size: 15px;
									height: 44px;
									line-height: 44px;
									cursor: pointer;
									border: none;
									color: rgb(255, 255, 255);
									background-color: rgb(255, 83, 83);
								}
							}
						}

						.nav-my-account {
							position: absolute;
							top: 100%;
							right: 0;
							display: none;
							opacity: 0;
							box-sizing: border-box;
							width: 200px;
							padding: 4px 12px;
							background: #fff;
							border: 1px solid #d8d8d8;

							.nav-my-account-li {
								font-size: 14px;
								font-weight: normal;
								line-height: 2.2;
								display: block;
								color: #666;
								cursor: pointer;

								&:hover text {
									border-bottom: 1px solid #666;
								}
							}
						}

						.icon-blod {
							font-weight: bold;
							cursor: pointer;
						}

						.nav-submenu-link {
							display: flex;
							align-items: center;

							.shopping-cart-badge {
								vertical-align: text-top;
								font-size: 12px;
								line-height: 18px;
								display: inline-block;
								box-sizing: border-box;
								min-width: 25px;
								padding: 0 6px;
								text-align: center;
								border-radius: 13px;
								color: rgb(255, 255, 255);
								background-color: rgb(255, 83, 83);
							}

							.icon-text {
								font-size: 20px;
							}
						}
					}
				}
			}

			.nav-menu-main {
				font-size: 14px;
				line-height: 50px;
				display: flex;
				align-items: center;
				height: 50px;

				.nav-main-ul {
					flex: 1;
					display: flex;
					align-items: center;

					li {
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;

						&:hover {
							.second-menu {
								display: flex;
							}

							.third-menu {
								display: none;
							}
						}

						.second-menu {
							display: none;
							position: absolute;
							box-shadow: #0000001a 0px 2px 4px 0px;
							transition: width 0.2s ease 0s;
							z-index: 650;
							background-color: #fff;
							left: 12px;
							max-width: 340px;
							top: 100%;

							.third-menu {
								display: none;
								box-shadow: #0000001a 0px 2px 4px 0px;
								background-color: #fff;

								.third-menu-ul {
									width: 340px;
									max-height: 535px;
									box-sizing: border-box;
									overflow: hidden;
									padding: 10px 20px;
									flex-shrink: 0;
									cursor: pointer;

									.third-menu-title {
										border-bottom: 1px solid #000;
										height: 30px;
										line-height: 30px;
										font-weight: normal;
										-webkit-box-flex: 1;
										flex-grow: 1;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
										display: flex;
										justify-content: space-between;
										align-items: center;
										width: 100%;
										margin-bottom: 10px;
									}

									.third-menu-li {
										display: flex;
										align-items: center;
										width: 300px;
										height: 30px;
										padding: 0px 3px;
										box-sizing: border-box;
										line-height: 30px;

										&:hover {
											text {
												border-bottom: 1px solid #333;
											}
										}
									}
								}
							}

							.second-menu-ul {
								width: 340px;
								max-height: 535px;
								box-sizing: border-box;
								overflow: hidden;
								padding: 10px 20px;
								flex-shrink: 0;
							}

							.second-menu-li {
								display: flex;
								align-items: center;
								width: 300px;
								height: 30px;
								padding: 0px 3px;
								box-sizing: border-box;
								line-height: 30px;
								justify-content: space-between;
								cursor: pointer;

								&:hover {
									.second-menu-text {
										border-bottom: 1px solid #333;
									}
								}
							}
						}
					}

					.nav_menu_a {
						display: inline-block;
						height: 30px;
						line-height: 30px;
						font-weight: normal;
						-webkit-box-flex: 1;
						flex-grow: 1;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						max-width: 255px;
					}
				}

				.searchbox {
					height: 50px;
					position: relative;
					display: flex;
					align-items: center;

					.searchinput {
						width: 214px;
						height: 25px;
						padding: 0 15px 0 15px;
						border-radius: 20px;
						outline: none;
						background: #e4e2e2;
						display: flex;
						align-items: center;
						justify-content: space-between;
						box-sizing: border-box;

						input {
							font-size: 12px;
							line-height: 20px;
							height: 25px;
							box-sizing: border-box;
							width: 100%;
						}
					}
				}

				.nav_menu_a {
					padding: 0px 12px;
					-webkit-box-flex: 1;
					flex-grow: 1;
					display: inline-flex;
					-webkit-box-pack: start;
					justify-content: flex-start;
					-webkit-box-align: center;
					align-items: center;
					color: rgb(10, 0, 0);

					.xjt {
						margin-left: 5px;
						font-weight: bold;
						font-size: 14px !important;
					}

				}
			}
		}
	}

	@media (max-width:1000px) {
		.place {
			height: 94px;
		}

		.hearder .hearder_wrapper_body .nav_menu .nav-menu-ul .sub-nav-li .nav-my-account {
			width: 100vw;
			left: 0;
			position: fixed;
			top: 85px;
		}

		.hearder {
			.header_wrapper {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				height: 56px;

				.hearder_wrapper_body {
					align-items: center;

					.mid_left {
						display: flex;
						align-items: center;
						width: 55%;
					}

					.mid-nav {
						width: 16%;
						display: flex;
						align-items: center;
						justify-content: center;
						max-width: 70px;
						height: 56px;
					}

					.pc-bz {
						display: none;
					}



					.logo {
						height: 56px;
						width: 34%;
						max-width: 120px;
						padding: 0;

						image {
							width: 56px;
							height: 56px;
						}
					}

					.nav-menu-main {
						display: none;
					}

					.nav_menu {
						display: grid;
						height: 100%;
						width: 45%;
						margin-right: 16px;

						.mid-search {
							display: block;
						}

						.nav-menu-ul .sub-nav-li .nav-shopping-cart-menu {
							display: none;
						}
					}
				}

			}
		}

	}
</style>